<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<html>

	<head>
	
	    <meta charset="utf-8"/>
	    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	    <meta name="viewport" content="width=device-width, initial-scale=1"/>
	    <meta name="description" content=""/>
	    <meta name="author" content=""/>
		<meta name="_csrf" content="${_csrf.token}"/>
	    <meta name="_csrf_header" content="${_csrf.headerName}"/>
	    
	    <title>HappyHome Admin</title>
	
	    <!-- Bootstrap Core CSS -->
	    <link href="<c:url value="/resources/admin/css/bootstrap.min.css"/>" rel="stylesheet"/>
	
	    <!-- Custom CSS -->
	    <link href="<c:url value="/resources/admin/css/sb-admin.css"/>" rel="stylesheet"/>
	
	    <!-- Custom Fonts -->
	    <link href="<c:url value="/resources/admin/font-awesome-4.1.0/css/font-awesome.min.css"/>" rel="stylesheet" type="text/css"/>
	
		<!-- datepicker plugin, css -->
	    <link href="<c:url value="/resources/datepicker/bootstrap.css"/>" rel="stylesheet"/>
	    <link href="<c:url value="/resources/datepicker/datepicker.css"/>" rel="stylesheet"/>
	    <!-- /datepicker plugin, css -->
	    
	    <!-- ckeditor plugin -->
	    <script src="<c:url value="/resources/ckeditor/ckeditor.js"/>" type="text/javascript"></script>
	    <!-- end ckeditor -->
	    
	    <!-- currency plugin-->
	    <!-- jQuery Version 1.11.0 -->
	    <script src="<c:url value="/resources/admin/js/jquery-1.11.0.js"/>"></script>
	    <script src="<c:url value="/resources/currency/jquery.number.js"/>"></script>
	    <script type="text/javascript">
	    		/* function set currency format */
				$(function(){
					// Set up the number formatting.
					$('#priceRental').number( true, 0 );
					$('#priceDeposit').number( true, 0 );
				});
				/* function back to list */
				function backToRoomList(){
					document.location.href = "${pageContext.request.contextPath}/admin/rooms/list";
				}
		</script>
	    <!-- /currency plugin-->
	    
	    <!-- script district -->
	    <script>
	    $(document).ready(function(){
	    	/* global variable for house */
	    	roomId = -1;
	   	  	/* form submit value */
	   	 	$('#myMultiProductForm').submit(function( event ) {
				event.preventDefault(); 
		   		for ( instance in CKEDITOR.instances ){
			        CKEDITOR.instances[instance].updateElement();
			    }
		   		var form = new FormData(document.getElementById('myMultiProductForm'));
		   		
		   		$.ajax({
		   			url: "${pageContext.request.contextPath}/admin/rooms/edit",
		   			type:"POST",
		   			data: form,
		   			dataType: 'text',
		   		    processData: false,
		   		    contentType: false,
			   		beforeSend: function (xhr){ 
			   	        xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content")); 
			   	    },
		   			success: function (response) {
		   				var result = response.split(";");
		   				roomId = result[0];
		   				document.getElementById("modal-body-notifycation").innerHTML = '<i class="icon-ok-sign modal-icon"></i> Create \"' + result[1] + '\" successfull!';
		   				$("#myModal").modal('show'); 
		    		},
		   			error: function(jqXHR, textStatus, errorThrown){
		   				alert(textStatus);
		   			}
		   		});
		   		event.unbind();
			});
	   	  	
	   	  	/* hide modal to redirect to upload images */
	   	 	$('#myModal').on('hidden.bs.modal', function (e) {
		   		e.preventDefault(); /* STOP default action */
		   		document.location.href = "${pageContext.request.contextPath}/admin/rooms/uploadImages?roomId="+ roomId; 
		   	});
		});
	    </script>
	    <!-- / script district -->
	</head>

	<body>
		<c:url value="/j_spring_security_logout" var="logoutUrl" />
		<form action="${logoutUrl}" method="post" id="logoutForm" style="display:none;">
			<input type="hidden" name="${_csrf.parameterName}"
				value="${_csrf.token}" />
		</form>
	    <script>
			function formSubmit() {
				document.getElementById("logoutForm").submit();
			}
		</script>
		
	    <div id="wrapper">
	
	        <!-- Navigation -->
	        <%@ include file="/WEB-INF/pages/admin/navigation.jsp" %>
	
	        <div id="page-wrapper">
	
	            <div class="container-fluid">
	
	                <!-- Page Heading -->
	                <div class="row">
	                    <div class="col-lg-12">
	                        <h1 class="page-header">
	                            EDIT ROOM
	                        </h1>
	                        <ol class="breadcrumb">
	                            <li class="active">
	                                <i class="fa fa-dashboard"></i> Dashboard
	                            </li>
	                        </ol>
	                    </div>
	                </div>
	                <!-- /.row -->
	
	                <div class="row">
	                    <div class="col-lg-12">
	                        <div class="panel panel-default">
	                            <div class="panel-heading">
	                                <h3 class="panel-title"><i class="fa fa-money fa-fw"></i> EDIT ROOM</h3>
	                            </div><!-- panel-heading -->
	                            <div class="panel-body">
	                            	<div class="row">
	                            		<form role="form" id="myMultiProductForm" method="post" enctype="multipart/form-data">
	                            			<input type="hidden" name="idRoom" value="${room.idRoom}" />
						                    <div class="col-lg-6">
					                            <div class="form-group">
					                                <label>Room Code</label>
					                                <input class="form-control" id="codeRoom" name="codeRoom" value="${room.codeRoom }" required/>
					                            </div>
					
					                            <div class="form-group">
					                                <label>Room Name</label>
					                                <input class="form-control" id="nameRoom" name="nameRoom" value="${room.nameRoom }" required/>
					                            </div>
					
												<div class="form-group">
					                                <label>Persons</label>
					                                <select class="form-control" name="numberMaxPerson">
					                                    <c:forEach var="i" begin="1" end="10">
					                                    	<c:if test="${room.numberMaxPerson == i}">
					                                    		<option value="${i}" selected="selected">${i}</option>
					                                    	</c:if>
					                                    	<c:if test="${room.numberMaxPerson != i}">
					                                    		<option value="${i}">${i}</option>
					                                    	</c:if>
														</c:forEach>
					                                </select>
					                            </div>
					                            
					                            <div class="form-group">
													<label>Sqft</label>
					                                <div class="form-group input-group">								
						                                <input type="text" class="form-control" value="${room.sqft }"
						                                	onkeypress='return (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 8' name="sqft"/>
						                                <span class="input-group-addon">m<sup>2</sup></span>
					                            	</div>
					                            </div>
						                    </div><!-- /col-lg-6 -->
						                    <div class="col-lg-6">
						                            <div class="form-group">
													  	<label>House</label>
						                                <select class="form-control" id="dropDownListHouse" name="house">
						                                	<c:if test="${not empty houses}">
								                                <c:forEach var="houseC" items="${houses}">
								                                	<c:if test="${houseC.codeHouse == house.codeHouse }">
								                                		<option value=${houseC.codeHouse } selected="selected">${houseC.nameHouse}</option>
								                                	</c:if>
								                                	<c:if test="${houseC.codeHouse != house.codeHouse }">
																		<option value=${houseC.codeHouse }>${houseC.nameHouse}</option>
																	</c:if>
																</c:forEach>
															</c:if>
						                                </select>
						                            </div>
						
						                            <div class="form-group">
													  	<label>Floor</label>	
						                                <input type="text" class="form-control" name="floor"
						                                value = "${room.floor }"
						                                	onkeypress='return (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 8'/>
						                            </div>
						
						                            <div class="form-group">
						                            	<label>Rental Price</label>
						                                <input type="text" class="form-control" id="priceRental" value = "${room.priceRoom }" name="priceRoom"/>
						                            </div>
						
						                            <div class="form-group">
						                            	<label>Deposit Price</label>
						                                <input type="text" class="form-control" id="priceDeposit" value = "${room.depositRoom }" name="depositRoom"/>
						                            </div>
						                    </div>	<!-- /col-lg-6 -->
	                        				<div class="col-lg-12">
		                        				<div class="panel panel-default">
						                            <div class="panel-heading">
						                                <h3 class="panel-title"><i class="fa fa-money fa-fw"></i> Utilities</h3>
						                            </div><!-- panel-heading -->
						                            <div class="panel-body">
														<c:if test="${not empty resultCombine }">
															<c:forEach var="utility" items="${resultCombine }" varStatus="counter">
																<div class="col-md-4 col-sm-4 col-xs-12">
																	<div class="checkbox">
									                                    <label>
									                                    	<c:if test="${utility.status }">
									                                        	<input type="checkbox" name="${utility.codeUtility }" value="true" autocomplete="off" checked/> ${utility.nameUtility }</input>
									                                    	</c:if>
									                                    	<c:if test="${not utility.status }">
									                                        	<input type="checkbox" name="${utility.codeUtility }" value="true" autocomplete="off"/> ${utility.nameUtility }</input>
									                                    	</c:if>
									                                    </label>
								                                	</div>
																</div>
															</c:forEach>
														</c:if>
						                            </div><!-- /panel-body -->
									            </div>  <!-- panel panel-default -->
								           	</div>   <!-- /col-lg-12 -->  
								           	<div class="col-lg-12">
								           		<div class="panel panel-default">
								           			<div class="panel-heading">
								           				<h3 class="panel-title">Description</h3>
								           			</div>
								           			<div class="panel-body">
								           				<textarea name="description" id="description" class="col-lg-12">
								           					${room.description }
											            </textarea>
											            <script>
											                CKEDITOR.replace( 'description' );
											            </script>
								           			</div>
								           		</div>
								           	</div>
								           	<div class="col-lg-12">         
		                        				<button type="submit" class="btn btn-default">
													<span class="glyphicon glyphicon-floppy-save"></span>
													<spring:message code="message.SaveButton" text="default text" />
												</button>
					                            <button type="reset" class="btn btn-default">
					                            	<span class="glyphicon glyphicon-repeat"></span>
					                            	<spring:message code="message.ResetButton" text="default text" />
												</button>
					                            <button type="button" class="btn btn-default" onclick="backToRoomList()">
					                            	<span class="glyphicon glyphicon-off"></span> 
					                            	<spring:message code="message.ExitButton" text="default text" />
					                            </button>
					                        </div><!-- /col-lg-12 --> 
	                        			</form>
	                    			</div><!-- /row -->
	                			</div><!-- /panel-body -->
	                         </div><!-- panel panel-default -->
	                     </div><!-- col-lg-12 -->
	                </div><!-- /row -->
	            </div><!-- /container-fluid -->
	
	          </div><!-- /page-wrapper -->
	
	        </div><!-- /#wrapper -->
			<!-- Modal -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
			        <h4 class="modal-title" id="myModalLabel">
			        	<spring:message code="message.FormNotification" text="notification"/>
			        </h4>
			      </div>
			      <div class="modal-body">
			        	<p class="error-text" id="modal-body-notifycation"/>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-primary" data-dismiss="modal">
			        	<spring:message code="message.closeButton" text="close"/>
			        </button>
			      </div>
			    </div>
			  </div>
			</div>
			<!-- /modal -->
	    <!-- Bootstrap Core JavaScript -->
	    <script src="<c:url value="/resources/admin/js/bootstrap.min.js"/>"></script>
	
	    <!-- datepicker plugin -->
	    <script src="<c:url value="/resources/datepicker/bootstrap-datepicker.js"/>"></script>
		<script> 
			/* set check-out date >= check-in date */
			$('#dpd1').datepicker('setValue', new Date());
			
			var nowTemp = new Date();
			var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
			 
			var checkin = $('#dpd1').datepicker({
			  onRender: function(date) {
			    return date.valueOf() < now.valueOf() ? 'disabled' : '';
			  }
			}).on('changeDate', function(ev) {
			  if (ev.date.valueOf() > checkout.date.valueOf()) {
			    var newDate = new Date(ev.date);
			    newDate.setDate(newDate.getDate() + 1);
			    checkout.setValue(newDate);
			  }
			  checkin.hide();
			  $('#dpd2')[0].focus();
			}).data('datepicker');
			var checkout = $('#dpd2').datepicker({
			  onRender: function(date) {
			    return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
			  }
			}).on('changeDate', function(ev) {
			  checkout.hide();
			}).data('datepicker');
		</script>
		<!-- /datepicker plugin-->
	</body>

</html>
